import Timer from '../../common/timer/Timer';

import { CosmicView } from '../view/cosmicTimer';

/**
 * 该场景非固定长宽: 300+ x (72~150)
 * 
 * HTML 设置方案
 * #main
 *   #zrender  zIndex=0
 *   #three    zIndex=-100
 */

function createScene(context) {
  let t = new App(context);
  global.t = t;
  let scene = new context.Scene({
    require : ['zrender'],
    init : (libs) => t.init(libs),
    destroy : () => t.destroy(),
    collectInfo : () => t.collectInfo(),
    onMessage : (key, data) => t.onMessage(key, data),
  });
  t.sendStatus = scene.sendStatus;
  return scene;
};

class App {
  constructor(context) {
    this.context = context;

    this.timer = new Timer();
    this.timer.listener = () => this.onTimerStatusChanged();

    // 要设置一个启动时就显示的挂件
    this.pendant = null;
  }

  // wait for overwrite
  sendStatus() {}

  init(libs) {
    initDom();
    this.loadPendant();
    this.view = new CosmicView({
      context : this.context,
      zrender : libs.zrender,
      dom : elZRender,
      timer : this.timer,
    });
    this.view.startTick();
  }

  destroy() {}

  collectInfo() {
    const {timer} = this;
    return {
      delta : (timer.delta / 100) | 0, // 1/10 秒, 数据
      // 计时器是否正在运行.
      // 暂停时也为 true, 重置或者在 0 时刻还未启动时为 false
      player : timer.isPlaying() || timer.isPaused(),
      // 是否在暂停.
      pause : timer.isPaused(),
      // 是否在初始化状态
      boot : timer.isInit()
    };
  }

  onMessage(key, value) {
    switch (key) {
      // 计时器相关
      case 'start': this.timer.play(); break;
      case 'stop': this.timer.stop(); break;
      case 'pause': this.timer.pause(); break;
      case 'reset': this.timer.reset(); break;
      // case 'record': this.record(); break; // TODO 还未确定格式
      case 'undoPause': this.timer.undoPause(); break;
    }
  }

  loadPendant() {
    if (this.pendant != null) {
      this.context.destroyPendant(this.pendant);
      this.pendant = null;
    }

    this.context.createPendant('shaders/cosmicRing', {
      dom : elThree,
      params : this.params,
    }).then((pendant) => {
      this.pendant = pendant;
      this.pendant.registerTimerSupplier(() => {
        return {
          time: this.timer.delta / 1000,
          status: this.timer.isPlaying() ? 'playing' : 'paused',
        };
      });
    });
  }

  onTimerStatusChanged() {
    this.sendStatus();
    switch (this.timer.status) {
      case Timer.STATUS_PLAYING:
        this.view.emit('timer/start', { timer: this.timer });
        break;
      case Timer.STATUS_PAUSED:
        this.view.emit('timer/pause', { timer: this.timer });
        break;
      case Timer.STATUS_FINISHED:
        this.view.emit('timer/stop', { timer: this.timer });
        break;
      case Timer.STATUS_INIT:
        this.view.emit('timer/reset', { timer: this.timer });
        break;
    }
  }
}

/** @type {HTMLElement} */ let elMain;
/** @type {HTMLElement} */ let elZRender;
/** @type {HTMLElement} */ let elThree;

function initDom(width, height) {
  elMain = document.getElementById('main');
  width = width || window.innerWidth;
  height = height || window.innerHeight;

  elZRender = document.createElement('div');
  elZRender.id = 'zrender';
  elZRender.style.position = 'absolute';
  elZRender.style.overflow = 'hidden';
  elZRender.style.left = '0px';
  elZRender.style.top = '0px';
  elZRender.style.width = width + 'px';
  elZRender.style.height = height + 'px';
  elZRender.style.zIndex = '0';
  elMain.appendChild(elZRender);

  elThree = document.createElement('div');
  elThree.id = 'cosmic';
  elThree.style.position = 'absolute';
  elThree.style.overflow = 'hidden';
  elThree.style.left = '0px';
  elThree.style.top = '0px';
  elThree.style.width = width + 'px';
  elThree.style.height = height + 'px';
  elThree.style.zIndex = '-100';
  elMain.appendChild(elThree);

  return [elMain, elZRender, elThree];
}

export default createScene;
